<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="module" src="../src/js/form.js"></script>
    <script type="module" src="../src/js/inputNumber.js"></script>
    <script type="module" src="../src/js/inputDate.js"></script>
    <script type="module" src="../src/js/blocker.js"></script>
    <script type="module" src="../src/js/dialog.js"></script>
</head>

<body>
    <jsc-form class="form">
        <jsc-input-number value="123456" max="20000" min='100' decimals='2' placeholder='input' jscbind='age' readonly>
        </jsc-input-number>
        <jsc-input-number value="123456" max="20000" min='100' decimals='2' placeholder='input' times='1000'
            jscbind='skills.0.power'>
        </jsc-input-number>
        <div>
            <jsc-input-date jscbind='birthday' max="2022/05/02" min="2022/01/01" value="2022/05/02"></jsc-input-date>
            <jsc-input-date jscbind='birthday' max="2022/05/02" min="2022/01/01" value="2022/05/02"></jsc-input-date>
        </div>
        <div>
            <jsc-input-date jscbind='birthday' max="2022/05/02" min="2022/01/01" value="2022/05/02"></jsc-input-date>
            <jsc-input-date jscbind='birthday' max="2022/05/02" min="2022/01/01" value="2022/05/02"></jsc-input-date>
        </div>
    </jsc-form>
    <jsc-blocker></jsc-blocker>
    <jsc-dialog></jsc-dialog>
</body>
<script defer="true" type="text/javascript">
    let person = { 'age': 13, 'isAdmin': true, name: 'Lora', skills: [{ name: 'shoot', power: 15 }, { name: 'jump', power: 64 }] };

    document.addEventListener('DOMContentLoaded', function (e) {
        let form = document.querySelector('.form');
        form.bind = person;
    });
</script>

</html>